//
// ██████╗  █████╗ ███████╗██╗ ██████╗
// ██╔══██╗██╔══██╗██╔════╝██║██╔════╝
// ██████╔╝███████║███████╗██║██║
// ██╔══██╗██╔══██║╚════██║██║██║
// ██████╔╝██║  ██║███████║██║╚██████╗
// ╚═════╝ ╚═╝  ╚═╝╚══════╝╚═╝ ╚═════╝
//

//== Gray Shades
//## Different gray shades to be used for our variables and components
$gray-darker: #0a1325;
$gray-dark: #474e5c;
$gray: #787d87;
$gray-light: #a9acb3;
$gray-primary: #e7e7e9;
$gray-lighter: #f8f8f8;

//== Step 1: Brand Colors
$brand-default: $gray-primary;
$brand-primary: #264ae5;
$brand-success: #3cb33d;
$brand-warning: #eca51c;
$brand-danger: #e33f4e;

$brand-logo: false;
$brand-logo-height: 32px;
$brand-logo-width: 32px; // Only used for CSS brand logo

//== Step 2: UI Customization

// Default Font Size & Color
$font-size-default: 14px;
$font-color-default: #0a1325;

// Global Border Color
$border-color-default: #ced0d3;
$border-radius-default: 4px;

// Topbar
$topbar-bg: #020557;
$topbar-minimalheight: 48px;
$topbar-border-color: $border-color-default;

// Sidebar
$sidebar-bg: #24276c;

// Topbar mobile
$m-header-height: 45px;
$m-header-bg: $topbar-bg;
$m-header-color: #fff;
$m-header-title-size: 16px;

// Navbar Brand Name / For your company, product, or project name (used in layouts/base/)
$navbar-brand-name: #fff;

// Background Colors
// Backgrounds
$bg-color: #f8f8f8;
$bg-color-secondary: #fff;

// Default Link Color
$link-color: $brand-primary;
$link-hover-color: darken($link-color, 15%);

//
//  █████╗ ██████╗ ██╗   ██╗ █████╗ ███╗   ██╗ ██████╗███████╗██████╗
// ██╔══██╗██╔══██╗██║   ██║██╔══██╗████╗  ██║██╔════╝██╔════╝██╔══██╗
// ███████║██║  ██║██║   ██║███████║██╔██╗ ██║██║     █████╗  ██║  ██║
// ██╔══██║██║  ██║╚██╗ ██╔╝██╔══██║██║╚██╗██║██║     ██╔══╝  ██║  ██║
// ██║  ██║██████╔╝ ╚████╔╝ ██║  ██║██║ ╚████║╚██████╗███████╗██████╔╝
// ╚═╝  ╚═╝╚═════╝   ╚═══╝  ╚═╝  ╚═╝╚═╝  ╚═══╝ ╚═════╝╚══════╝╚═════╝
//

//== Typography
//## Change your font family, weight, line-height, headings and more (used in components/typography)

// Font Family Import (Used for google font plugin in theme creater)
$font-family-import: "resources/fonts/open-sans/open-sans.css";

// Font Family / False = fallback from Bootstrap (Helvetica Neue)
$font-family-base: "Open Sans", sans-serif;

// Font Sizes
$font-size-large: 18px;
$font-size-small: 12px;

// Font Weights
$font-weight-light: 100;
$font-weight-normal: normal;
$font-weight-semibold: 600;
$font-weight-bold: bold;

// Font Size Headers
$font-size-h1: 31px;
$font-size-h2: 26px;
$font-size-h3: 24px;
$font-size-h4: 18px;
$font-size-h5: $font-size-default;
$font-size-h6: 12px;

// Font Weight Headers
$font-weight-header: $font-weight-semibold;

// Line Height
$line-height-base: 1.428571429;

// Spacing
$font-header-margin: 0 0 8px 0;

// Text Colors
$font-color-detail: #6c717e;
$font-color-header: #0a1325;

//== Navigation
//## Used in components/navigation

// Default Navigation styling
$navigation-item-height: unset;
$navigation-item-padding: 8px;

$navigation-font-size: 14px;
$navigation-sub-font-size: $font-size-small;
$navigation-glyph-size: 20px; // For glyphicons that you can select in the Mendix Modeler

$navigation-color: #fff;
$navigation-color-hover: #fff;
$navigation-color-active: #fff;

$navigation-sub-color: #fff;
$navigation-sub-color-hover: #fff;
$navigation-sub-color-active: #fff;

// Navigation Sidebar
$navsidebar-bg: $sidebar-bg;
$navsidebar-bg-hover: darken($navsidebar-bg, 10%);
$navsidebar-bg-active: darken($navsidebar-bg, 10%);

$navsidebar-sub-bg: $navsidebar-bg-hover;
$navsidebar-sub-bg-hover: $navsidebar-bg;
$navsidebar-sub-bg-active: $navsidebar-bg;

$navsidebar-border-color: $navsidebar-bg-hover;

$navsidebar-font-size: $font-size-default;
$navsidebar-sub-font-size: $font-size-small;
$navsidebar-glyph-size: 20px; // For glyphicons that you can select in the Mendix Modeler

$navsidebar-color: #fff;
$navsidebar-color-hover: #fff;
$navsidebar-color-active: #fff;

$navsidebar-sub-color: #fff;
$navsidebar-sub-color-hover: #fff;
$navsidebar-sub-color-active: #fff;

$navsidebar-width-closed: 52px;
$navsidebar-width-open: 232px;

// Navigation topbar
$navtopbar-font-size: $font-size-default;
$navtopbar-sub-font-size: $font-size-small;
$navtopbar-glyph-size: 1.2em; // For glyphicons that you can select in the Mendix Modeler

$navtopbar-bg: $topbar-bg;
$navtopbar-bg-hover: mix($topbar-bg, white, 85%);
$navtopbar-bg-active: mix($topbar-bg, white, 85%);
$navtopbar-color: #fff;
$navtopbar-color-hover: $navtopbar-color;
$navtopbar-color-active: $navtopbar-color;

$navtopbar-sub-bg: $topbar-bg;
$navtopbar-sub-bg-hover: $navtopbar-bg-hover;
$navtopbar-sub-bg-active: $navtopbar-bg-hover;
$navtopbar-sub-color: #fff;
$navtopbar-sub-color-hover: #fff;
$navtopbar-sub-color-active: #fff;

//## Used in layouts/base
$navtopbar-border-color: $topbar-border-color;

//== Form
//## Used in components/inputs

// Values that can be used default | lined
$form-input-style: default;

// Form Label
$form-label-color: $font-color-default;
$form-label-size: $font-size-default;
$form-label-weight: $font-weight-semibold;
$form-label-gutter: 8px;

// Form Input dimensions
$form-input-height: auto;
$form-input-padding-y: 8px;
$form-input-padding-x: 8px;
$form-input-static-padding-y: 8px;
$form-input-static-padding-x: 0;
$form-input-font-size: $form-label-size;
$form-input-line-height: $line-height-base;
$form-input-border-radius: $border-radius-default;

// Form Input styling
$form-input-bg: #fff;
$form-input-bg-focus: #fff;
$form-input-bg-hover: $gray-primary;
$form-input-bg-disabled: $bg-color;
$form-input-color: $font-color-default;
$form-input-focus-color: $form-input-color;
$form-input-disabled-color: #9da1a8;
$form-input-placeholder-color: #6c717c;
$form-input-border-color: $gray-primary;
$form-input-border-focus-color: $brand-primary;

// Form Input Static styling
$form-input-static-border-color: $gray-primary;

// Form Group
$form-group-margin-bottom: 16px;
$form-group-gutter: 16px;

//== Buttons
//## Define background-color, border-color and text. Used in components/buttons

// Default button style
$btn-font-size: 14px;
$btn-bordered: false; // Default value false, set to true if you want this effect
$btn-border-radius: $border-radius-default;

// Button Background Color
$btn-default-bg: #fff;
$btn-primary-bg: $brand-primary;
$btn-success-bg: $brand-success;
$btn-warning-bg: $brand-warning;
$btn-danger-bg: $brand-danger;

// Button Border Color
$btn-default-border-color: $gray-primary;
$btn-primary-border-color: $brand-primary;
$btn-success-border-color: $brand-success;
$btn-warning-border-color: $brand-warning;
$btn-danger-border-color: $brand-danger;

// Button Text Color
$btn-default-color: $brand-primary;
$btn-primary-color: #fff;
$btn-success-color: #fff;
$btn-warning-color: #fff;
$btn-danger-color: #fff;

// Button Icon Color
$btn-default-icon-color: $gray;

// Button Background Color
$btn-default-bg-hover: $btn-default-border-color;
$btn-primary-bg-hover: mix($btn-primary-bg, black, 80%);
$btn-success-bg-hover: mix($btn-success-bg, black, 80%);
$btn-warning-bg-hover: mix($btn-warning-bg, black, 80%);
$btn-danger-bg-hover: mix($btn-danger-bg, black, 80%);
$btn-link-bg-hover: $gray-lighter;

//== Header blocks
//## Define look and feel over multible building blocks that serve as header

$header-min-height: 240px;
$header-bg-color: $brand-primary;
$header-bgimage-filter: brightness(60%);
$header-text-color: #fff;
$header-text-color-detail: rgba(0, 0, 0, 0.2);

//
// ███████╗██╗  ██╗██████╗ ███████╗██████╗ ████████╗
// ██╔════╝╚██╗██╔╝██╔══██╗██╔════╝██╔══██╗╚══██╔══╝
// █████╗   ╚███╔╝ ██████╔╝█████╗  ██████╔╝   ██║
// ██╔══╝   ██╔██╗ ██╔═══╝ ██╔══╝  ██╔══██╗   ██║
// ███████╗██╔╝ ██╗██║     ███████╗██║  ██║   ██║
// ╚══════╝╚═╝  ╚═╝╚═╝     ╚══════╝╚═╝  ╚═╝   ╚═╝
//

//== Color variations
//## These variations are used to support several other variables and components

// Color variations
$color-default-darker: mix($brand-default, black, 60%);
$color-default-dark: mix($brand-default, black, 70%);
$color-default-light: mix($brand-default, white, 40%);
$color-default-lighter: mix($brand-default, white, 20%);

$color-primary-darker: mix($brand-primary, black, 60%);
$color-primary-dark: mix($brand-primary, black, 70%);
$color-primary-light: mix($brand-primary, white, 40%);
$color-primary-lighter: mix($brand-primary, white, 20%);

$color-success-darker: mix($brand-success, black, 60%);
$color-success-dark: mix($brand-success, black, 70%);
$color-success-light: mix($brand-success, white, 40%);
$color-success-lighter: mix($brand-success, white, 20%);

$color-warning-darker: mix($brand-warning, black, 60%);
$color-warning-dark: mix($brand-warning, black, 70%);
$color-warning-light: mix($brand-warning, white, 40%);
$color-warning-lighter: mix($brand-warning, white, 20%);

$color-danger-darker: mix($brand-danger, black, 60%);
$color-danger-dark: mix($brand-danger, black, 70%);
$color-danger-light: mix($brand-danger, white, 40%);
$color-danger-lighter: mix($brand-danger, white, 20%);

$brand-gradient: linear-gradient(to right top, #264ae5, #2239c5, #1b29a6, #111988, #03096c);

//== Grids
//## Used for Datagrid, Templategrid, Listview & Tables (see components folder)

// Default Border Colors
$grid-border-color: $border-color-default;

// Spacing
// Default
$grid-padding-top: 16px;
$grid-padding-right: 16px;
$grid-padding-bottom: 16px;
$grid-padding-left: 16px;

// Listview
$listview-padding-top: 16px;
$listview-padding-right: 16px;
$listview-padding-bottom: 16px;
$listview-padding-left: 16px;

// Background Colors
$grid-bg: transparent;
$grid-bg-header: transparent; // Grid Headers
$grid-bg-hover: mix($grid-border-color, #fff, 20%);
$grid-bg-selected: mix($grid-border-color, #fff, 30%);
$grid-bg-selected-hover: mix($grid-border-color, #fff, 50%);

// Striped Background Color
$grid-bg-striped: mix($grid-border-color, #fff, 10%);

// Background Footer Color
$grid-footer-bg: $gray-primary;

// Text Color
$grid-selected-color: $font-color-default;

// Paging Colors
$grid-paging-bg: transparent;
$grid-paging-bg-hover: transparent;
$grid-paging-border-color: transparent;
$grid-paging-border-color-hover: transparent;
$grid-paging-color: $gray-light;
$grid-paging-color-hover: $brand-primary;

//== Tabs
//## Default variables for Tab Container Widget (used in components/tabcontainer)

// Text Color
$tabs-color: $font-color-detail;
$tabs-color-active: $font-color-default;
$tabs-lined-color-active: $font-color-default;

$tabs-lined-border-width: 3px;

// Border Color
$tabs-border-color: $border-color-default;
$tabs-lined-border-color: $brand-primary;

// Background Color
$tabs-bg: transparent;
$tabs-bg-pills: #e7e7e9;
$tabs-bg-hover: lighten($tabs-border-color, 5);
$tabs-bg-active: $brand-primary;

//== Modals
//## Default Mendix Modal, Blocking Modal and Login Modal (used in components/modals)

// Background Color
$modal-header-bg: transparent;

// Border Color
$modal-header-border-color: $border-color-default;

// Text Color
$modal-header-color: $font-color-default;

//== Dataview
//## Default variables for Dataview Widget (used in components/dataview)

// Controls
$dataview-controls-bg: transparent;
$dataview-controls-border-color: $border-color-default;

// Empty Message
$dataview-emptymessage-bg: $bg-color;
$dataview-emptymessage-color: $font-color-default;

//== Alerts
//## Default Bootstrap alerts, not a widget in the Modeler (used in components/alerts)

// Background Color
$alert-success-bg: $color-success-lighter;
$alert-warning-bg: $color-warning-lighter;
$alert-danger-bg: $color-danger-lighter;

// Text Color
$alert-success-color: $color-success-darker;
$alert-warning-color: $color-warning-darker;
$alert-danger-color: $color-danger-darker;

// Border Color
$alert-success-border-color: $color-success-dark;
$alert-warning-border-color: $color-warning-dark;
$alert-danger-border-color: $color-danger-dark;

//== Wizard

$wizard-step-height: 48px;
$wizard-step-number-size: 64px;
$wizard-step-number-font-size: $font-size-h3;

//Wizard step states
$wizard-default-bg: #fff;
$wizard-default-color: #fff;
$wizard-default-step-color: $font-color-default;
$wizard-default-border-color: $border-color-default;

$wizard-active-bg: $color-primary-lighter;
$wizard-active-color: $color-primary-dark;
$wizard-active-step-color: $color-primary-dark;
$wizard-active-border-color: $color-primary-dark;

$wizard-visited-bg: $color-success-lighter;
$wizard-visited-color: $color-success-dark;
$wizard-visited-step-color: $color-success-dark;
$wizard-visited-border-color: $color-success-dark;

//== Labels
//## Default Bootstrap Labels, not a widget in the Modeler (used in components/labels)

// Background Color
$label-default-bg: $brand-default;
$label-primary-bg: $brand-primary;
$label-success-bg: $brand-success;
$label-warning-bg: $brand-warning;
$label-danger-bg: $brand-danger;

// Border Color
$label-default-border-color: $brand-default;
$label-primary-border-color: $brand-primary;
$label-success-border-color: $brand-success;
$label-warning-border-color: $brand-warning;
$label-danger-border-color: $brand-danger;

// Text Color
$label-default-color: $font-color-default;
$label-primary-color: #fff;
$label-success-color: #fff;
$label-warning-color: #fff;
$label-danger-color: #fff;

//== Groupbox
//## Default variables for Groupbox Widget (used in components/groupbox)

// Background Color
$groupbox-default-bg: $gray-primary;
$groupbox-primary-bg: $brand-primary;
$groupbox-success-bg: $brand-success;
$groupbox-warning-bg: $brand-warning;
$groupbox-danger-bg: $brand-danger;
$groupbox-white-bg: #fff;

// Text Color
$groupbox-default-color: $font-color-default;
$groupbox-primary-color: #fff;
$groupbox-success-color: #fff;
$groupbox-warning-color: #fff;
$groupbox-danger-color: #fff;
$groupbox-white-color: $font-color-default;

//== Callout (groupbox) Colors
//## Extended variables for Groupbox Widget (used in components/groupbox)

// Text and Border Color
$callout-default-color: $font-color-default;
$callout-success-color: $brand-success;
$callout-warning-color: $brand-warning;
$callout-danger-color: $brand-danger;

// Background Color
$callout-default-bg: $color-default-lighter;
$callout-success-bg: $color-success-lighter;
$callout-warning-bg: $color-warning-lighter;
$callout-danger-bg: $color-danger-lighter;

//== Timeline
//## Extended variables for Timeline Widget
// Colors
$timeline-icon-color: $brand-primary;
$timeline-border-color: $border-color-default;
$timeline-event-time-color: $brand-primary;

// Sizes
$timeline-icon-size: 18px;
$timeline-image-size: 36px;

//Timeline grouping
$timeline-grouping-size: 120px;
$timeline-grouping-border-radius: 30px;
$timeline-grouping-border-color: $timeline-border-color;

//== Accordions
//## Extended variables for Accordion Widget

// Default
$accordion-header-default-bg: $bg-color-secondary;
$accordion-header-default-bg-hover: $bg-color;
$accordion-header-default-color: $font-color-header;
$accordion-default-border-color: $border-color-default;

$accordion-bg-striped: $grid-bg-striped;
$accordion-bg-striped-hover: $grid-bg-selected;

// Semantic background colors
$accordion-header-primary-bg: $btn-primary-bg;
$accordion-header-secondary-bg: $btn-default-bg;
$accordion-header-success-bg: $btn-success-bg;
$accordion-header-warning-bg: $btn-warning-bg;
$accordion-header-danger-bg: $btn-danger-bg;

$accordion-header-primary-bg-hover: $btn-primary-bg-hover;
$accordion-header-secondary-bg-hover: $btn-default-bg-hover;
$accordion-header-success-bg-hover: $btn-success-bg-hover;
$accordion-header-warning-bg-hover: $btn-warning-bg-hover;
$accordion-header-danger-bg-hover: $btn-danger-bg-hover;

// Semantic text colors
$accordion-header-primary-color: $btn-primary-color;
$accordion-header-secondary-color: $btn-default-color;
$accordion-header-success-color: $btn-success-color;
$accordion-header-warning-color: $btn-warning-color;
$accordion-header-danger-color: $btn-danger-color;

// Semantic border colors
$accordion-primary-border-color: $btn-primary-border-color;
$accordion-secondary-border-color: $btn-default-border-color;
$accordion-success-border-color: $btn-success-border-color;
$accordion-warning-border-color: $btn-warning-border-color;
$accordion-danger-border-color: $btn-danger-border-color;

//== Spacing
//## Advanced layout options (used in base/mixins/default-spacing)

// Smallest spacing
$spacing-smallest: 2px;

// Smaller spacing
$spacing-smaller: 4px;

// Small spacing
$spacing-small: 8px;

// Medium spacing
$spacing-medium: 16px;
$t-spacing-medium: 16px;
$m-spacing-medium: 16px;

// Large spacing
$spacing-large: 24px;
$t-spacing-large: 24px;
$m-spacing-large: 16px;

// Larger spacing
$spacing-larger: 32px;

// Largest spacing
$spacing-largest: 48px;

// Layout spacing
$layout-spacing-top: 24px;
$layout-spacing-right: 24px;
$layout-spacing-bottom: 24px;
$layout-spacing-left: 24px;

$t-layout-spacing-top: 24px;
$t-layout-spacing-right: 24px;
$t-layout-spacing-bottom: 24px;
$t-layout-spacing-left: 24px;

$m-layout-spacing-top: 16px;
$m-layout-spacing-right: 16px;
$m-layout-spacing-bottom: 16px;
$m-layout-spacing-left: 16px;

// Combined layout spacing
$layout-spacing: $layout-spacing-top $layout-spacing-right $layout-spacing-bottom $layout-spacing-left;
$m-layout-spacing: $m-layout-spacing-top $m-layout-spacing-right $m-layout-spacing-bottom $m-layout-spacing-left;
$t-layout-spacing: $t-layout-spacing-top $t-layout-spacing-right $t-layout-spacing-bottom $t-layout-spacing-left;

// Gutter size
$gutter-size: 8px;

//== Tables
//## Table spacing options (used in components/tables)

$padding-table-cell-top: 8px;
$padding-table-cell-bottom: 8px;
$padding-table-cell-left: 8px;
$padding-table-cell-right: 8px;

//== Media queries breakpoints
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

$screen-xs: 480px;
$screen-sm: 576px;
$screen-md: 768px;
$screen-lg: 992px;
$screen-xl: 1200px;

// So media queries don't overlap when required, provide a maximum (used for max-width)
$screen-xs-max: calc(#{$screen-sm} - 1px);
$screen-sm-max: calc(#{$screen-md} - 1px);
$screen-md-max: calc(#{$screen-lg} - 1px);
$screen-lg-max: calc(#{$screen-xl} - 1px);

//== Settings
//## Enable or disable your desired framework features
// Use of !important
$important-flex: true; // ./base/flex.scss
$important-spacing: true; // ./base/spacing.scss
$important-helpers: true; // ./helpers/helperclasses.scss

//===== Legacy variables =====

//== Step 1: Brand Colors
$brand-inverse: #24276c;
$brand-info: #0086d9;

//== Step 2: UI Customization

//== Buttons
//## Define background-color, border-color and text. Used in components/buttons

// Button Background Color
$btn-inverse-bg: $brand-inverse;
$btn-info-bg: $brand-info;

// Button Border Color
$btn-inverse-border-color: $brand-inverse;
$btn-info-border-color: $brand-info;

// Button Text Color
$btn-inverse-color: #fff;
$btn-info-color: #fff;

// Button Background Color
$btn-inverse-bg-hover: mix($btn-inverse-bg, white, 80%);
$btn-info-bg-hover: mix($btn-info-bg, black, 80%);

//== Color variations
//## These variations are used to support several other variables and components

// Color variations
$color-inverse-darker: mix($brand-inverse, black, 60%);
$color-inverse-dark: mix($brand-inverse, black, 70%);
$color-inverse-light: mix($brand-inverse, white, 60%);
$color-inverse-lighter: mix($brand-inverse, white, 20%);

$color-info-darker: mix($brand-info, black, 60%);
$color-info-dark: mix($brand-info, black, 70%);
$color-info-light: mix($brand-info, white, 60%);
$color-info-lighter: mix($brand-info, white, 20%);

//== Alerts
//## Default Bootstrap alerts, not a widget in the Modeler (used in components/alerts)

// Background Color
$alert-info-bg: $color-primary-lighter;

// Text Color
$alert-info-color: $color-primary-darker;

// Border Color
$alert-info-border-color: $color-primary-dark;

//== Labels
//## Default Bootstrap Labels, not a widget in the Modeler (used in components/labels)

// Background Color
$label-info-bg: $brand-info;
$label-inverse-bg: $brand-inverse;

// Border Color
$label-info-border-color: $brand-info;
$label-inverse-border-color: $brand-inverse;

// Text Color
$label-info-color: #fff;
$label-inverse-color: #fff;

//== Groupbox
//## Default variables for Groupbox Widget (used in components/groupbox)

// Background Color
$groupbox-inverse-bg: $brand-inverse;
$groupbox-info-bg: $brand-info;

// Text Color
$groupbox-inverse-color: #fff;
$groupbox-info-color: #fff;

//== Callout (groupbox) Colors
//## Extended variables for Groupbox Widget (used in components/groupbox)

// Text and Border Color
$callout-info-color: $brand-info;

// Background Color
$callout-info-bg: $color-info-lighter;
